<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<!--创建新的 HTML 元素 (节点) - appendChild()-->
		<div id="div1">
			<p id="p1">这是一个段落</p>
			<P id="p2">这是另外一个段落</P>
		</div>
		
		<!--创建新的 HTML 元素 (节点) - insertBefore()-->
		<div id="div2">
			<p id="p3">这是一个段落</p>
			<p id="p4">这是另外一个段落</p>
		</div>
		
		<!--替换 HTML 元素 - replaceChild()-->
		<div id="div3">
			<p id="p5">这是一个段落</p>
			<p id="p6">这是另外一个段落</p>
		</div>
		
		<script>
			var para = document.createElement("p");
			var node = document.createTextNode("这是一个新段落");
			para.appendChild(node);
			
			var element = document.getElementById("div1");
			element.appendChild(para);
			
			var para1 = document.createElement("p");
			var node1 = document.createTextNode("这是一个新段落");
			para1.appendChild(node1);
			
			var element1 = document.getElementById("div2");
			var p3 = document.getElementById("p3");
			element1.insertBefore(para1,p3);
			
			//移除已存在的元素
			var element2 = document.getElementById("div2");
			var node2 = document.getElementById("p3");
			element2.removeChild(node2);
			
			//替换 HTML 元素 - replaceChild()
			var para2 = document.createElement('p');
			var node2 = document.createTextNode("这是一个新段落");
			para2.appendChild(node2);
			
			var element3 = document.getElementById("div3");
			var p5 = document.getElementById("p5");
			
			element3.replaceChild(para2,p5);
		</script>
		
	</body>
</html>